<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF//8">
  <meta name="viewport" content="width=device//width, initial//scale=1.0">
  <title>Document</title>
  <style>
    body {margin: 0;overflow: hidden;}
    #canvas {background-color: antiquewhite;}
  </style>
</head>
<body>

  <canvas id="canvas"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    const canvas = document.querySelector('#canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');

    ctx.lineWidth = 10;
    /* 
      1.开始建立路径: beginPath()
      2.向路径集合中添加子路径:
        [
          形状; closePath() 可选,
          moveTo(x,y); 形状; closePath() 可选,
          moveTo(x,y); 形状; closePath() 可选,
        ]
      3.显示路径: 填充fill(), 描边stroke()
    */

    // 直线: lineTo(x,y);
    /* ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,300);
    ctx.closePath();
    ctx.stroke(); */

    // 圆弧: arc(x,y,半径,开始弧度,结束弧度,方向);
    /* ctx.beginPath();
    ctx.arc(300,300,200,0,Math.PI*3/2);
    ctx.moveTo(300+200,400);
    ctx.arc(300,400,200,0,Math.PI*3/2);
    ctx.stroke(); */

    // 切线圆弧: arcTo(x1,y1,x2,y2,半径);
    /* ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,300);
    ctx.stroke(); */

    /* ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.arcTo(400,50,400,300,200);
    ctx.stroke(); */

    // 二次贝塞尔曲线: quadraticCurverTo(cpx1,cpy1,x,y);
    /* ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,300);
    ctx.stroke(); */

    /* ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.quadraticCurveTo(400,50,400,300);
    ctx.stroke(); */

    // 三次贝塞尔曲线: bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y);
    /* ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,300);
    ctx.lineTo(700,300);
    ctx.stroke(); */

    /* ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.bezierCurveTo(400,50,400,300,700,300);
    ctx.stroke(); */

    // 矩形: rect(x,y,w,h); 不需要单独写moveTo
    ctx.beginPath();
    ctx.rect(50,50,400,200);
    ctx.stroke();

  </script>
</body>
</html>